<template>
  <div class="">
    <van-field name="uploader" label="支付凭证">
      <template #input>
        <van-uploader
          :formData="formData"
          :file-list="fileList"
          multiple="true"
          :after-read="afterRead"
          :max-count="count"
          @delete="deleteImage"
        >
          <template #preview-cover="{ file }">
            <div>{{ file }}</div>
          </template>
        </van-uploader>
      </template>
    </van-field>
  </div>
</template>

<script>
import {
  uploadFile,
} from "@/api/index";
export default {
  props: {
    customFileList: {
      type: Array,
      default: () => [],
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    formData: {
      type: Object,
      default: () => {
        type: "12";
      },
    },
    count: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    customFileList: {
      handler(newVal, oldVal) {
        this.fileList = this.customFileList;
        console.log("newVal", this.fileList);

        // 执行相应的操作
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    deleteImage(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$emit("remove", event.detail.index);

      // console.log('e', event, this.fileList);
    },
    afterRead(file) {
      //定义formData
      const formData = new FormData();
      formData.append("files", file.file); // 传入文件
      formData.append("type", 2);
      //调用请求
      uploadFile(formData)
        .then((res) => {
          return res.data.data;
        })
        .catch((error) => {});
    },
    handleUpload(file) {},
  },
};
</script>

<style>
</style>